<template>
  <div class="activityDetail">
    <!-- 卡片詳情 -->
    <CommonCardInfo></CommonCardInfo>
    <!-- 搜索詳情 -->
    <div class="detail-search">
      <div class="search-item">课程代码</div>
      <el-select
        class="el-select"
        v-model="courseCode"
        clearable
        placeholder="Select"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button class="refresh" icon="Refresh">数据同步</el-button>
      <el-button class="circlePlus" icon="CirclePlus" @click="pointAdd"
        >手动添加</el-button
      >
    </div>
    <!-- table表单 -->
    <el-table :data="tableData" style="width: 100%" height="500">
      <el-table-column fixed prop="date" label="Date" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="state" label="State" width="120" />
      <el-table-column prop="city" label="City" width="320" />
      <el-table-column prop="address" label="Address" width="600" />
      <el-table-column prop="zip" label="Zip" />
    </el-table>
  </div>
  <!-- 抽屉组件 -->
  <common-drawer
    :drawerDialog="drawerDialog"
    :title="title"
    :size="size"
    :drawerType="drawerType"
    @closeDrawer="closeDrawer"
    @submitDrawer="submitDrawer"
  ></common-drawer>
    <!-- 返回顶部 -->
    <BackToTop />
</template>
<script setup>
import CommonCardInfo from "@/components/common/commonCardInfo.vue";
import CommonDrawer from "@/components/common/commonDrawer.vue";
import { ref } from "vue";
import { Refresh, CirclePlus } from "@element-plus/icons-vue";

//手动添加
const courseCode = ref("");
// 显隐
const drawerDialog = ref(false);
// 标题
const title = ref("基本信息");
// 大小
const size = ref("40%");
// 类型
const drawerType = ref("approval");
//函数
const pointAdd = () => {
  drawerDialog.value = true;
};

//关闭抽屉
const closeDrawer = () => {
  drawerDialog.value = false;
};
//提交抽屉
const submitDrawer = (val) => {
  console.log("val", val);
  drawerDialog.value = false;
};

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
];
const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
</script>

<style lang="scss" scoped>
.activityDetail {
  width: 100%;
  height: 100%;
  .detail-search {
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 40px 0;
    .search-item {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 16px;
      color: #3f3f3f;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .el-select {
    margin-left: 15px;
  }
  .refresh {
    margin-left: 15px;
    background: linear-gradient(270deg, #4d84fa 0%, #4f86fa 2%, #aabaff 100%);
    color: #fff;
  }
  .circlePlus {
    background: linear-gradient(270deg, #ffba00 0%, #f48a4d 0%, #ffd690 100%);
    color: #fff;
  }
}
</style>
